//后台设置页面，卡片的宽高
const cardWidth = 400;
const cardHeight = 644;

//屏幕宽高
const iWidth = window.innerWidth;
const iHeight = window.innerHeight;

//人员信息元素占比
const phRatio = 348 / cardWidth;
const pvRatio = 208 / cardHeight;

const getMobileStyle = (origin, type) => {
    return {
        h: origin / cardWidth * iWidth,
        v: origin / cardHeight * iHeight
    } [type]
}

const formParamsTransToStyle = (key, formParams) => {
    //后台设置页面的宽高
    const oWidth = formParams.width || 28;
    const oHeight = formParams.height || 20;

    //移动端页面所需要的宽高
    const width = getMobileStyle(oWidth, "h");
    const height = getMobileStyle(oHeight, "v");

    const value = formParams[key];

    //页面页面所需要的margin值
    let hmargin = getMobileStyle(parseFloat(formParams["h-margin"]), "h"),
        vmargin = getMobileStyle(parseFloat(formParams["v-margin"]), "v");

    const paramsToStyle = {
        horizon: {
            "1": {
                left: hmargin
            },
            "2": {
                left: (iWidth - width) / 2 + hmargin
            },
            "3": {
                right: hmargin
            }
        },
        vertical: {
            "1": {
                top: vmargin
            },
            "2": {
                top: (iHeight - height) / 2 + vmargin
            },
            "3": {
                bottom: vmargin
            }
        },
        "h-align": {
            textAlign: (value == "1") ? "left" : (value == "2") ? "center" : "right"
        },
        "v-align": {
            verticalAlign: (value == "1") ? "top" : (value == "2") ? "middle" : "bottom"
        },
        fill: {
            backgroundRepeat: (value == "4") ? "repeat" : "no-repeat",
            backgroundSize: ["cover", "contain", "100% 100%", "", ""][parseInt(value) - 1],
            backgroundPosition: (value == "5") ? "center" : ""
        },
        transparency: {
            opacity: value / 100
        },
        "txt-color": {
            backgroundColor: value
        },
        "bg-color": {
            backgroundColor: value
        },
        "font-color": {
            color: value
        },
        "font-size": {
            "font-size": value
        },
        width: {
            width: `${width}px`,
        },
        height: {
            height: `${height}px`
        }
    }

    if (key == "font-family") {
        return {
            [key]: value
        }
    }

    if (key == "rotate") {
        const obj = {};
        ["", "-ms-", "-moz-", "-webkit-", "-o-"].forEach(prefix => {
            Object.assign(obj, {
                [`${prefix}transform`]: `rotate(${value}deg)`
            })
        })
        return obj;
    }

    if (["horizon", "vertical"].includes(key)) {
        return paramsToStyle[key][value]
    }

    return paramsToStyle[key];
};

const getImgUrl = (id, defaultImg) => {
    return (id == "0") ? defaultImg : `/weaver/weaver.file.FileDownload?fileid=${id}`;
}

const pWidth = phRatio * iWidth;
const pHeight = pvRatio * iHeight;


export {
    getImgUrl,
    formParamsTransToStyle,
    pWidth,
    pHeight
}